<template>
	<view>
		<u-dropdown-item :title="title">
			<view class="slot-content" style="background-color: #FFFFFF;">
				<view class="u-flex">
					<scroll-view scroll-with-animation scroll-y="true" style="height: 600rpx;" >
						<view class="u-flex-1 u-text-center" style="background: #f1f1f1;">
							<view  :class="index==current[0]?'block':''" @click="select(index,0,item)" v-for="(item,index) in provin" :key="index" class="u-padding-20 ">
								{{item.label}}
							</view>
						</view>
					</scroll-view>
					<scroll-view scroll-y="true" style="height: 600rpx;">
						<view class="u-flex-1 u-text-center">
							<view   :class="index==current[1]?'block':''" @click="select(index,1,item)"  v-for="(item,index) in city" :key="index" class="u-padding-20 ">
								{{item.label}}
							</view>
						</view>
					</scroll-view>
					<!-- <scroll-view scroll-y="true" style="height: 600rpx;">
						<view class="u-flex-1 u-text-center">
							<view   :class="index==current[2]?'block':''" @click="select(index,2,item)" v-for="(item,index) in  area" :key="index" class="u-padding-20 ">
								{{item.label}}
							</view>
						</view>
					</scroll-view> -->
				</view>
				<view class=" u-flex u-row-around">
					<u-button hair-line="false"  type="info" @click="closeDropdown" class="u-flex-1 u-padding-20">清空</u-button>
				
					<u-button type="primary" class="u-flex-2 u-padding-20" @click="sure">确认</u-button>
				</view>
			
			</view>
		</u-dropdown-item>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import provinces from '@/uview-ui/libs/util/province.js';
	import citys from '@/uview-ui/libs/util/city.js';
	import areas from '@/uview-ui/libs/util/area.js';
	export default {
		data() {
			return {
				provin: provinces,
				city:[],
				area:[],
				index:0,
				title:"全国",
				current:[],
				
			}
		},
		computed: {
			...mapState(['userAddress'])
		},
	
		watch:{
			userAddress:{
				immediate:true,
				handler(v){
					if(v){
						this.title=v;
					}
					
				}
			}
		},
		
		methods:{
			sure(){
				this.$emit('province',this.title);
			},
			select(index,e,item){
				if(e==0){
					this.index=index;
					if(citys[index].length==1){
						this.$emit('select',item.label);
					}else{
						this.city=citys[index];
						this.area=[];
						this.current[0]=index;
					}
					this.title=item.label;
				}
				if(e==1){
					  this.area=areas[this.index][index];
					  	this.title=item.label;
					  this.current[1]=index;
					  this.$emit('select',item.label)
					  
				}
				// if(e==2){
				// 	this.title=item.label;
					
				// 	this.current[2]=index;
				// }
	
			},
			closeDropdown(){
				this.current=[];
				this.city=[];
				this.area=[];
				this.title='全国';
				this.$emit('close')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.block{
		background: #fff;
		animation: myAnimation 0.2s linear forwards;
	}
	
	
	@keyframes myAnimation {
		from {
			background: transparent;
		}
	
		to {
			background: #fff;
		}
	}
	
</style>
